<template>
	<view class="page bodyBg">
		<view class="account">
			<text>我的余额:</text>
			<view class="value">
				<view class="muchMoney" v-if="acount.toString().length >= 10">
					<text class="hideText" >***</text>
					<text>对不起，钱太多 显示不下了</text>
				</view>
				<countUp v-else :num="acount" color="#919191" width="1.8rem" height="3rem" fontSize="3rem" />
			</view>
		</view>
		<view class="input">
			<text>￥</text>
			<input type="number" v-model.number="money" placeholder="输入金额" placeholder-class="normalFont" />
		</view>
		
		<button type="primary" class="recharge" :loading="loading" :disabled="loading" @click="recharge">立即充值</button>

		<!-- #ifdef APP-VUE -->
		<button type="warn" class="exit" @click="exit">退出</button>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<view class="toggleBox">
			<button class="toggleBtn" @click="toggleAccount">切换账号</button>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		Tool,
		API,
		Http
	} from '../../utils/index.js'
	export default {
		data() {
			return {
				acount: '***',
				money: '',
				loading: false,
				info: {
					userId: null,
					baseUrl: null
				}
			}
		},
		onLoad() {
			// 查询余额
			this.getAcount();
		},
		methods: {
			async getAcount() {
				let vm = this;
				vm.info.userId = uni.getStorageSync('userId');
				vm.info.baseUrl = uni.getStorageSync('BaseUrl');
				let url = vm.info.baseUrl + API.API_URL_CUSTOMER_Account;
				let res = await Http.post(url, {
					userId: vm.info.userId
				});
				let {
					data
				} = res;
				if (data && !data.errorCode) {
					return this.acount = data.data.amount;
				}
				return Tool.Toast('查询余额失败');
			},
			async recharge() {
				let vm = this;
				if (!this.money) {
					return Tool.Toast('请输入金额');
				}
				this.loading = true;
				let url = vm.info.baseUrl + API.API_URL_CUSTOMER_Recharge_Account;
				let res = await Http.post(url, {
					userId: vm.info.userId,
					amount: this.money
				});
				let {
					data
				} = res;
				if (data && !(+data.errorCode) && data.data) {
					let total = this.acount + this.money;
					this.acount = total;
					this.loading = false;
					this.money = '';
					return;
				}
				Tool.Toast('充值失败');
				this.loading = false;
			},
			// #ifdef APP-VUE
			exit() {
				// 清空本地缓存
				uni.clearStorage();
				// 退出
				uni.navigateBack({
					delta: 10
				});
				uni.navigateBack({
					delta: 10
				});
			},
			// #endif
			// #ifdef MP-WEIXIN
			toggleAccount() {
				// 清空本地缓存
				uni.clearStorage();
				uni.reLaunch({
					url: '../index/index'
				})
			}
			// #endif
		}
	}
</script>

<style>
	.page {
		height: 100vh;
		box-sizing: border-box;
		padding: 50rpx;
		align-items: center;
		/* #ifdef MP-WEIXIN */
		flex-direction: column;
		/* #endif */
	}

	.account {
		flex-direction: column;
		text-align: center;
		font-size: 1.2rem;
		padding: 40rpx;
	}

	.account .value {
		margin: 0 auto;
		margin-top: 40rpx;
		font-weight: bold;
	}

	.input {
		display: flex;
		position: relative;
		border: 1px solid #919191;
		border-radius: 15rpx;
		padding: 20rpx;
		margin: 50rpx 0;
		align-items: center;
	}

	.input>* {
		font-weight: bold;
	}

	.input>text {
		color: #919191;
	}

	.input input {
		position: relative;
		padding-left: 10rpx;
		flex: 1;
		font-size: 1rem;
	}

	.normalFont {
		font-weight: normal;
	}

	.hideText {
		font-weight: bold;
		font-size: 3rem;
		color: #919191;
	}

	.recharge {
		color: #fff;
		background-color: #28a745;
		border-color: #28a745;
		width: 600rpx;
		/* #ifdef MP-WEIXIN */
		position: absolute;
		bottom: 120px;
		/* #endif */
	}
	

	/* #ifndef APP-PLUS */
	.recharge:active {
		background-color: #218838;
		border-color: #1e7e34;
		box-shadow: 0 0 0 0.2rem rgba(72, 180, 97, .5)
	}
		/* #endif */
		
	.muchMoney {
		display: flex;
		flex-direction: column;
	}
	
	.muchMoney>text:nth-child(2) {
		color: #919191;
		font-size: 12px;
	}

	.exit {
		position: fixed;
		bottom: 50px;
		right: 50rpx;
		height: 150rpx;
		font-weight: bold;
		font-size: .8rem;
		display: flex;
		align-items: center;
	}

	/* #ifdef MP-WEIXIN */
	.toggleBox {
		width: 100%;
		position: absolute;
		bottom: 50px;
		flex-direction: row;
		justify-content: center;
	}

	.toggleBtn {
		width: 600rpx;
	}

	/* #endif */
</style>
